<!DOCTYPE html>
<html>
    <head>
        <title>color-conversion</title>
        
        <script>console.clear();</script>
        <script src="../dist/color-conversion.min.js?v1"></script>

        <style>
            #combos li {
                display: table;
                background-image: repeating-linear-gradient(90deg, gray 0, gray 12px, white 0, white 24px);
                white-space: nowrap;
            }
            #combos li div {
                display: inline-block;
                width: 14em;
                height: 2em;
                padding: .5em;
                margin: -.25em;
                border: .5em solid white;
                overflow: hidden;
                text-shadow: 1px 1px 0 white;
            }
            #single li {
                border-left: 30px solid;
            }
        </style>
    </head>
    <body>
        <ul id="combos">
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
            <li>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </li>
        </ul>
        
        <div id="single">
            <input value="rgba(87,45,192,.66667)"/>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
        <script>
            /* global Color */
            Array.from = Array.from || function(list) { return Array.prototype.slice.call(list); };
            function $$(selector, context) {
                return Array.from((context || document).querySelectorAll(selector));
            }
            
            function setColor(el, colorA, color) {
                //color = color.replace(/(\.\d\d)\d+/g, '$1')
                //             .replace(/\,/g, ', ');
                
                el.style.backgroundColor = colorA;
                el.textContent = colorA;
                
                if(color) {
                   el.style.borderColor = color;
                }
            }
            
            
            //Auto-combos:
            const hex = '#' + Math.round(Math.random() * 0xFFFF).toString(16),
                  base = new Color(hex);
            //base.hsla = [Math.random(), Math.random(), Math.random(), Math.random()];
            const reps = [
                      hex,
                      base.rgbaString,
                      base.hslaString,
                      base.hex,
                  ];

            $$('#combos li').forEach(function(li, i) {
                const swatches = $$('div', li),
                      color = new Color(reps[i]);
                
                setColor(swatches[0], reps[i]);
                setColor(swatches[1], color.rgbaString, color.rgbString);
                setColor(swatches[2], color.hslaString, color.hslString);
                setColor(swatches[3], color.hex,        color.printHex());
            });
            
            
            //Custom input:
            const singleInput = $$('#single input')[0],
                  singleConv  = $$('#single li');
            
            singleInput.onchange = function(e) {
                const val = singleInput.value;
                if(!val) { return; }

                const color = new Color(val);

                setColor(singleConv[0], color.rgbaString, color.rgbString);
                setColor(singleConv[1], color.hslaString, color.hslString);
                setColor(singleConv[2], color.hex,        color.printHex());

                singleInput.select();
            };
            
            singleInput.onchange();
            
            
            //Color names:
            console.log('Checking colors..');
            const colors = { aliceBLUE:'#f0f8ff', ANTIquewhite:'#faebd7', aqua:'#00ffff', aquamarine:'#7fffd4', azure:'#f0ffff', beige:'#f5f5dc', bisque:'#ffe4c4', black:'#000000', blanchedalmond:'#ffebcd', blue:'#0000ff', blueviolet:'#8a2be2', brown:'#a52a2a', burlywood:'#deb887', cadetblue:'#5f9ea0', chartreuse:'#7fff00', chocolate:'#d2691e', coral:'#ff7f50', cornflowerblue:'#6495ed', cornsilk:'#fff8dc', crimson:'#dc143c', cyan:'#00ffff', darkblue:'#00008b', darkcyan:'#008b8b', darkgoldenrod:'#b8860b', darkgray:'#a9a9a9', darkgreen:'#006400', darkgrey:'#a9a9a9', darkkhaki:'#bdb76b', darkmagenta:'#8b008b', darkolivegreen:'#556b2f', darkorange:'#ff8c00', darkorchid:'#9932cc', darkred:'#8b0000', darksalmon:'#e9967a', darkseagreen:'#8fbc8f', darkslateblue:'#483d8b', darkslategray:'#2f4f4f', darkslategrey:'#2f4f4f', darkturquoise:'#00ced1', darkviolet:'#9400d3', deeppink:'#ff1493', deepskyblue:'#00bfff', dimgray:'#696969', dimgrey:'#696969', dodgerblue:'#1e90ff', firebrick:'#b22222', floralwhite:'#fffaf0', forestgreen:'#228b22', fuchsia:'#ff00ff', gainsboro:'#dcdcdc', ghostwhite:'#f8f8ff', gold:'#ffd700', goldenrod:'#daa520', gray:'#808080', green:'#008000', greenyellow:'#adff2f', grey:'#808080', honeydew:'#f0fff0', hotpink:'#ff69b4', indianred:'#cd5c5c', indigo:'#4b0082', ivory:'#fffff0', khaki:'#f0e68c', lavender:'#e6e6fa', lavenderblush:'#fff0f5', lawngreen:'#7cfc00', lemonchiffon:'#fffacd', lightblue:'#add8e6', lightcoral:'#f08080', lightcyan:'#e0ffff', lightgoldenrodyellow:'#fafad2', lightgray:'#d3d3d3', lightgreen:'#90ee90', lightgrey:'#d3d3d3', lightpink:'#ffb6c1', lightsalmon:'#ffa07a', lightseagreen:'#20b2aa', lightskyblue:'#87cefa', lightslategray:'#778899', lightslategrey:'#778899', lightsteelblue:'#b0c4de', lightyellow:'#ffffe0', lime:'#00ff00', limegreen:'#32cd32', linen:'#faf0e6', magenta:'#ff00ff', maroon:'#800000', mediumaquamarine:'#66cdaa', mediumblue:'#0000cd', mediumorchid:'#ba55d3', mediumpurple:'#9370db', mediumseagreen:'#3cb371', mediumslateblue:'#7b68ee', mediumspringgreen:'#00fa9a', mediumturquoise:'#48d1cc', mediumvioletred:'#c71585', midnightblue:'#191970', mintcream:'#f5fffa', mistyrose:'#ffe4e1', moccasin:'#ffe4b5', navajowhite:'#ffdead', navy:'#000080', oldlace:'#fdf5e6', olive:'#808000', olivedrab:'#6b8e23', orange:'#ffa500', orangered:'#ff4500', orchid:'#da70d6', palegoldenrod:'#eee8aa', palegreen:'#98fb98', paleturquoise:'#afeeee', palevioletred:'#db7093', papayawhip:'#ffefd5', peachpuff:'#ffdab9', peru:'#cd853f', pink:'#ffc0cb', plum:'#dda0dd', powderblue:'#b0e0e6', purple:'#800080', rebeccapurple:'#663399', red:'#ff0000', rosybrown:'#bc8f8f', royalblue:'#4169e1', saddlebrown:'#8b4513', salmon:'#fa8072', sandybrown:'#f4a460', seagreen:'#2e8b57', seashell:'#fff5ee', sienna:'#a0522d', silver:'#c0c0c0', skyblue:'#87ceeb', slateblue:'#6a5acd', slategray:'#708090', slategrey:'#708090', snow:'#fffafa', springgreen:'#00ff7f', steelblue:'#4682b4', tan:'#d2b48c', teal:'#008080', thistle:'#d8bfd8', tomato:'#ff6347', turquoise:'#40e0d0', violet:'#ee82ee', wheat:'#f5deb3', white:'#ffffff', whitesmoke:'#f5f5f5', yellow:'#ffff00', yellowgreen:'#9acd32' };
            for (const [name, hex] of Object.entries(colors)) {
                //console.log(name, hex);
                const color = new Color(name);
                if(color.printHex() !== hex) { console.warn(name, color, hex); }
            }
            console.log('Checking non-colors..');
            ['zebra', 'raspberry', 'bern', 'hague', 'ribs', 'bread', 'lipbalm', 'chuck', 'norris', 'undergraduate', 'gradient', 'lumberjack', 'mozilla', 'godzilla'].forEach(x => {
                try {
                    //console.log(x);
                    const color = new Color(x);
                    console.warn(x, color);
                } catch (e) {}
            });

        </script>
    </body>
</html>